<template>
  <div class="daohang">
    <div class="dh1">
      <a href="#">
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/d1fc5869-a1a2-4ab9-91f3-a20d9d57f5d1_1125_68.png?x-oss-process=image/format,webp/resize,w_1125,h_68/quality,q_95"
          alt
        />
      </a>
    </div>
    <div class="fenlei">
       <router-link exact to="/list" active-class="active" tag="ul">
        <ul>
          <li>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/be97e628-df3a-4b31-82ee-edf3686883d2T1907021531_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/5ee97ce7-9c93-4f79-8ca5-1a1de0cc85afT1907021609_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/7309e72f-1c23-424a-a220-91badfa2f49eT1907021955_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/f59ffba8-c2ad-457c-9070-7f4a8e5b83b7T1907021534_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
              <a href="#">
                <img
                  src="https://kaola-haitao.oss.kaolacdn.com/ba7064d2-37e7-4505-b3fd-93602df85b25T1902210142_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                  alt
                />
              </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/eb5afb31-3c18-4331-b5bb-f03b4b04040aT1911061954_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/038bb478-de11-4335-8bba-452f1762c0bbT2003271652_192_220.jpg?x-oss-process=image/resize,w_192,h_220/quality,q_95/"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/1914d008-312b-4410-a917-f6413fe84566T19062601008_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/fee4bf4d-1a1a-4ff6-95e1-7cfd497cb3afT1907111605_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
            <a href="#">
              <img
                src="https://kaola-haitao.oss.kaolacdn.com/7b848599-d340-4c12-8912-7618f492b8e7T19010151358_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95"
                alt
              />
            </a>
          </li>
        </ul>
      </router-link>
    </div>
    <div class="fuli">
      <a href="#" class="fulia">
        <img
          src="https://kaola-haitao.oss.kaolacdn.com/9cceb26e-7bfc-4e12-989f-12bf4319aa9dT2009111907_900_221.png?x-oss-process=image/format,webp/resize,w_900,h_221/quality,q_95"
          alt
        />
      </a>
    </div>
    <article class="xinren">
        <section class="xinren-a">
            <a href="#">
                <img src="https://kaola-haitao.oss.kaolacdn.com/0c7661c2-6858-4c90-b2a1-f47254bbcab6T2008232301_480_480.gif" alt="">
            </a>
        </section>
        <section class="xinren-b">
            <a href="#">
                <img src="https://kaola-haitao.oss.kaolacdn.com/7d2805aa-7775-4c81-896a-e0be9dfd2bfaT2008211429_480_240.jpg?x-oss-process=image/resize,w_480,h_0/quality,q_95/format,webp" alt="">
            </a>
              <a href="#">
                <img src="https://kaola-haitao.oss.kaolacdn.com/463b3b9b-f7a2-4ac6-bdee-07d8e9cb4dccT2003171437_480_240.gif" alt="">
            </a>
        </section>
    </article>
    <div class="huodong">
        <div class="huodong-a">
            <div class="huodong-a1">
                <div class="huodong-a2">
                    <p class="huodong-p1">硬核补贴</p>
                    <p class="huodong-p2">大牌低价补贴</p>
                    <div class="huodong-div">
                        <img src="https://kaola-haitao.oss-cn-zhangjiakou.aliyuncs.com/cd7b506b-76dd-48e9-a433-faf9679ac8dfT2005291151_500_500.jpg?x-oss-process=image/resize,w_400,h_0/quality,q_95/format,webp" alt="">
                        <img src="https://kaola-haitao.oss-cn-zhangjiakou.aliyuncs.com/c270dd79-8e09-4b14-bbb8-c1b0f12ff410T2005291151_500_500.jpg?x-oss-process=image/resize,w_400,h_0/quality,q_95/format,webp" alt="">
                    </div>
                </div>
            </div>
             <div class="huodong-a1">
                <div class="huodong-a2">
                    <p class="huodong-p1">排行榜</p>
                    <p class="huodong-p2">跟着买就对了</p>
                    <div class="huodong-div">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/81b61149-4284-48b2-a889-c775acc679aeT2002031420_500_500.jpg?x-oss-process=image/resize,w_400,h_0/quality,q_95/format,webp" alt="">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/49466bc6-490d-4649-b9b5-e11ac293c6faT2002031420_500_500.jpg?x-oss-process=image/resize,w_400,h_0/quality,q_95/format,webp" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img class="img1" src="https://kaola-haitao.oss.kaolacdn.com/61556274-32ef-44bf-84af-b3d4485ac157.png" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.dh1 {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  a {
    height: 28px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.fenlei {
  height: 190px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  ul {
    position: relative;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: 0;
    line-height: 0;
    transform-style: preserve-3d;
    li {
      display: inline-flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      flex-wrap: wrap;
      a {
        height: 94px;
        width: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.fuli {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
}
.fulia {
  height: 101px;
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.xinren{
    display: flex;
    .xinren-a{
        display: block;
        a{
            display: block;
            width: 207px;
            height: 207px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .xinren-b{
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        a{
            width: 207px;
            height: 103px;
            display: block;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.huodong{
    // margin-bottom: 50px;
    overflow: hidden;
    .huodong-a{
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        margin-left: 1px;
        .huodong-a1{
            -webkit-box-flex: 1;
            flex-grow: 1;
            box-sizing: border-box;
            border-bottom: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            .huodong-a2{
                width: 205px;
                box-sizing: border-box;
                height: 169px;
                padding-top: 11px;
                overflow: hidden;
                padding-left:16px;
                .huodong-p1{
                    display: block;
                    height: 29px;
                    // line-height: 0.64rem;
                    float: left;
                    font-size: 18px;
                    font-weight: bold;
                    margin-right: 5.5px;
                }
                .huodong-p2{
                    display: block;
                    font-size: 0.293333rem;
                    line-height: 22px;
                    float: left
                }
                .huodong-div{
                    clear: both;
                    display: flex;
                    -webkit-box-pack: start;
                    justify-content: flex-start;
                    -webkit-box-align: center;
                    align-items: center;
                    width: 189px;
                    height: 97px;
                    img{
                        height: 85px;
                        width: 85px;
                    }
                }
            }
        }
    }
}
.img1{
    width: 100%;
    height: 67px;
}
</style>
